<template>
  <a-spin :delay="200" tip="加载中..." :spinning="spinning" wrapper-class-name="loading" class="body">
    <!-- style="height: 100%; width: 100%" -->
    <a-config-provider :locale="lang[proxy.$i18n.locale]" :get-popup-container="getPopupContainer">
      <router-view />
    </a-config-provider>
  </a-spin>
</template>

<script lang="ts">
import { getCurrentInstance, defineComponent, ref, watch } from 'vue'
import zh_CN from 'ant-design-vue/es/locale/zh_CN'
import en_US from 'ant-design-vue/es/locale/en_US'
import { setDeviceType } from '@/utils/device'
import { loading } from '@/store/useSiteSettings'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('en')
export default defineComponent({
  setup(props) {
    const { proxy } = getCurrentInstance()
    const lang = { 'en-US': en_US, 'zh-CN': zh_CN }
    window.onresize = setDeviceType
    setDeviceType()
    const spinning = ref(false)
    watch(
      () => loading.value,
      (val) => {
        spinning.value = val
      }
    )
    dayjs.locale(proxy.$i18n.locale)
    return {
      proxy,
      lang,
      spinning
    }
  },
  methods: {
    getPopupContainer(el, dialogContext) {
      if (dialogContext) {
        return dialogContext.getDialogWrap()
      } else {
        return document.body
      }
    }
  }
})
</script>
<style lang="less" scoped>

.loading {
  // width: 100%;
  // height: 100%;
}
</style>
<style>
.loading.ant-spin-nested-loading>div>.ant-spin {
  max-height: unset;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
}

.ant-spin-nested-loading .ant-spin-container {
  /* width: 100%; */
  /* height: 100%; */
}

.ant-spin-nested-loading {
  /* overflow-y: hidden; */
}
</style>
